<template>
  <div>
    <div>
      <div class="header">
        <van-search
          v-model="key"
          :placeholder="'输入关键字搜索'"
          show-action
          shape="round"
          @search="onSearch"
        >
          <div slot="action" @click="onSearch">搜索</div>
        </van-search>
      </div>

      <div class="live-main">
        <div class="live-list clearfix">
          <router-link
            v-for="vo in datalist"
            :key="vo.id"
            :to="{ name: 'live', params: { uid: vo.id }}"
          >
            <div class="item">
              <div class="image">
                <img :src="vo.portrait" v-lazy="vo.portrait">
                <div class="info">
                  <div class="addr">{{vo.location}}</div>
                  <div class="user clearfix">
                    <span class="name">{{vo.nick}}</span>
                    <span class="online">{{vo.online_users}}</span>
                  </div>
                </div>
              </div>
            </div>
          </router-link>
        </div>
        <van-pagination
          @change="onPageChange"
          v-model="currentPage"
          :total-items="totalItems"
          :show-page-size="4"
          force-ellipses
          :items-per-page="24"
        />
      </div>
      <!-- <app-foot/> -->
    </div>
  </div>
</template>

<script>
import {
  Search,
  Icon,
  Toast,
  Lazyload,
  Pagination,
  Button,
  Tabbar,
  TabbarItem,
  tabs,
  tab
} from 'vant';

import AppFoot from './component/foot';
import AppNotice from './component/notice';
import Vue from 'vue';
import Api from '@/vendor/api';

Vue.use(Lazyload, {
  loading:
    '',
  error:
    ''
});

export default {
  name: 'livePage',
  components: {
    [Pagination.name]: Pagination,
    [Search.name]: Search,
    [Icon.name]: Icon,
    AppNotice
  },
  data() {
    return {
      key: '',
      totalItems: 480,
      currentPage: 1,
      perPage: 9,
      datalist: [],
      activeTab: 1,
      placeholder: '',
      api: null
    };
  },
  mounted() {
    this.api = new Api();
    this.init();
  },

  computed: {},
  beforeRouteUpdate(to, from, next) {
    next();
    try {
      this.init();
    } catch (e) {
      location.reload();
    }
  },
  methods: {
    init() {
      this.getPage(this.currentPage);
    },
    onSearch() {},
    refresh() {},
    onPageChange() {
      window.scrollTo(0, 0);
      this.getPage(this.currentPage);
    },
    getPage(page) {
      Toast.loading({ mask: false, loadingType: 'spinner', duration: 0 });
      this.api.getLiveList(page).then(list => {
        this.datalist = list;
        Toast.clear();
      });
    }
  }
};
</script>

<style lang="less">
.live-header {
  width: 100%;
  height: 55px;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  transition: top 0.5s;
  z-index: 99;
  opacity: 0.98;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.live-main {
  width: 100%;
  margin-top: 55px;
  margin-bottom: 55px;
  .live-list {
    margin-top: 60px;
    .item {
      width: 50vw;
      height: 50vw;
      float: left;
      .image {
        position: relative;
        width: 49vw;
        height: 49vw;
        margin: 0 auto;
        img {
          width: 49vw;
          height: 49vw;
          border-radius: 10px;
        }
        .info {
          background: rgba(0, 0, 0, 0.3);
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
          position: absolute;
          bottom: 0px;
          width: 49vw;
          color: #fff;
          .addr {
            margin: 5px;
            font-size: 12px;
          }
          .user {
            margin: 5px;
            font-size: 13px;
            font-weight: bold;
            span.name {
              float: left;
            }
            span.online {
              float: right;
            }
          }
        }
      }
    }
  }
}
</style>
